<template>
  <div class="dataBase">
    <ContentWrap>
      <el-form label-width="100px" ref="formRef" :model="searchValue">
        <el-row>
          <el-col :span="6">
            <el-form-item label="算法名称：" prop="algorithmName">
              <ns-input
                v-model="searchValue.algorithmName"
                clearable
                placeholder="请输入算法名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="算法描述：" prop="description">
              <ns-input v-model="searchValue.description" clearable placeholder="请输入算法描述" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="text-right">
            <el-button @click="searchReset" plain v-hasPermi="['system:strategy:search']"
              >重置</el-button
            >
            <el-button @click="search" plain v-hasPermi="['system:strategy:search']"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <el-form-item>
        <el-button type="primary" @click="addAlgorithm" v-hasPermi="['system:strategy:add']">
          新增</el-button
        >
        <el-button
          :disabled="ids.length == 0"
          type="danger"
          @click="delList"
          v-hasPermi="['system:strategy:delete']"
        >
          删除
        </el-button>
      </el-form-item>
      <AsyncTable
        v-bind="tableInfo"
        ref="tableRef"
        :fetchData="fetchData"
        @selection-change="changeTable"
      />
    </ContentWrap>
  </div>
</template>

<script setup lang="tsx">
import { ElMessage } from 'element-plus'
import AsyncTable from '@/components/AsyncTable'
import { useRouter } from 'vue-router'
import { algorithmPage, algorithmDelete } from '@/api/strategyManage/algorithm/index'
import dayjs from 'dayjs'
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
import { checkPermi } from '@/utils/permission'

const tableRef = ref()
const formRef = ref()
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const router = useRouter()
const ids = ref<string[]>([])

/**
 * @description: 选取列表时获取列表id
 * @param {*} val
 */
const changeTable = (val) => {
  ids.value = []
  val.map((item) => {
    ids.value.push(item.id)
  })
}
const searchReset = () => {
  formRef.value.resetFields()
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
const searchValue = ref({
  algorithmName: '',
  description: ''
})

const allSelect = ref(false)
const search = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
const tableInfo = reactive({
  columns: [
    {
      type: 'selection'
    },
    { label: '算法名称', prop: 'algorithmName' },
    { label: '算法描述', prop: 'description' },
    { label: '更新时间', prop: 'updateTime' },
    { label: '创建时间', prop: 'createTime' },
    {
      label: '操作项',
      width: '250px',
      render: ({ row }) => {
        return (
          <>
            {checkPermi(['system:strategy:update']) && (
              <el-button
                link
                type="primary"
                onClick={() => {
                  addAlgorithm(row)
                }}
              >
                编辑
              </el-button>
            )}
            {checkPermi(['system:strategy:delete']) && (
              <ns-button
                style="margin-left:6px"
                link
                type="danger"
                confirm
                onClick={() => {
                  del(row)
                }}
              >
                删除
              </ns-button>
            )}
          </>
        )
      }
    }
  ],
  data: []
})

const allSelectHandle = () => {
  allSelect.value = !allSelect.value
  tableRef.value.ignorePageSelect(allSelect.value)
}

const del = (row) => {
  proxy?.$modal
    .confirm(`确定要删除该数据吗？`)
    .then(() => {
      algorithmDelete(row.id).then((response) => {
        console.log('response', response)
        tableRef.value.fetchData()
        ElMessage.success('提交成功')
      })
    })
    .catch(() => {})
}
const delList = () => {
  proxy?.$modal
    .confirm(`确定要删除所选资产吗？`)
    .then(() => {
      assetListDel(ids.value).then((response) => {
        console.log('response', response)
        tableRef.value.fetchData()
        ElMessage.success('删除成功')
      })
    })
    .catch(() => {})
}
const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await algorithmPage({
    page,
    pageSize,
    ...searchValue.value
  })
  return { data, count }
}
const addAlgorithm = (row) => {
  proxy?.$Drawer({
    params: {
      ...row,
      callBack: () => {
        tableRef.value.resetPage()
        tableRef.value.fetchData()
      }
    },
    title: `新增算法`,
    size: '40%',
    component: import('./components/algorithmForm.vue')
  })
}

onMounted(() => {})
</script>

<style lang="scss">
.dataBase {
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: inline-flex;
    align-items: center;
    line-height: 23px;
    padding-left: 12px;
  }
  .el-form .el-select {
    width: 100%;
  }
  :deep(.hide-expand .cell) {
    display: none;
  }
  :deep(.el-form .el-cascader) {
    width: 100%;
  }
  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
  .el-dropdown-link:focus {
    outline: none;
  }
}
</style>
